<template>
   <view>
      <!-- 地址 -->
      <view class="address-section">
         <view class="order-content" @tap="toAddress('')">
            <text class="cuIcon-location text-grey margin-xs" style="font-size:48upx"></text>
            <view class="cen">
               <view class="top">
                  <text class="name">{{selectAddress.realName}}</text>
                  <text class="mobile">{{selectAddress.phone}}</text>
               </view>
               <text class="address">
                  {{selectAddress.locationAddress}}{{selectAddress.locationLabel}}
               </text>
            </view>
            <text class="yticon icon-you"></text>
         </view>
         <image class="a-bg" src=""></image>
      </view>

      <view class="goods-section">
         <view class="g-header b-b">
            <image class="logo" :src="currentShop.logoImage"></image>
            <text class="name">{{currentShop.name}}</text>
         </view>
         <!-- 商品列表 -->
         <view class="g-item">
            <image :src="sku.coverImageUrls[0]"></image>
            <view class="right">
               <view class="title clamp">{{currentSpu.name}}</view>
               <view class="spec">{{sku.name}}</view>
               <view class="price-box">
                  <text class="price">￥{{sku.price}}</text>
                  <text class="number">x 1</text>
               </view>
            </view>
         </view>
      </view>

      <!-- 优惠明细 -->
      <view class="yt-list">
         <view class="yt-list-cell b-b">
            <view class="cell-icon">
               券
            </view>
            <text class="cell-tit clamp">优惠券</text>
            <text class="cell-tip active">
               选择优惠券
            </text>
            <text class="cell-more wanjia wanjia-gengduo-d"></text>
         </view>
         <view class="yt-list-cell b-b">
            <view class="cell-icon hb">
               减
            </view>
            <text class="cell-tit clamp">商家促销</text>
            <text class="cell-tip disabled">暂无可用优惠</text>
         </view>
      </view>
      <!-- 金额明细 -->
      <view class="yt-list">
         <view class="yt-list-cell b-b">
            <text class="cell-tit clamp">数量 单位</text>
            <text class="cell-tip">{{sku.num}} {{sku.unit}}</text>
         </view>
         <view class="yt-list-cell b-b">
            <text class="cell-tit clamp">商品金额</text>
            <text class="cell-tip">￥{{sku.price * sku.num}}</text>
         </view>
         <view class="yt-list-cell b-b" v-if="sku.originPrice">
            <text class="cell-tit clamp">优惠金额</text>
            <text class="cell-tip red">-￥{{ (sku.originPrice - sku.price) * sku.num}}</text>
         </view>
         <view class="yt-list-cell b-b">
            <text class="cell-tit clamp">运费</text>
            <text class="cell-tip">免运费</text>
         </view>
         <view class="yt-list-cell desc-cell">
            <text class="cell-tit clamp">备注</text>
            <input class="desc" type="text" v-model="comment" placeholder="请填写备注信息" placeholder-class="placeholder" />
         </view>
      </view>

      <!-- 底部 -->
      <view class="footer">
         <view class="price-content">
            <text>实付款</text>
            <text class="price-tip">￥</text>
            <text class="price">{{sku.price *sku.num}}</text>
         </view>
         <text class="submit" @click="submit">提交订单</text>
      </view>

      <!-- 优惠券面板 -->
      <!-- <view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''">
         <view class="mask-content" @click.stop.prevent="stopPrevent">
            <view class="coupon-item" v-for="(item,index) in couponList" :key="index">
               <view class="con">
                  <view class="left">
                     <text class="title">{{item.title}}</text>
                     <text class="time">有效期至2019-06-30</text>
                  </view>
                  <view class="right">
                     <text class="price">{{item.price}}</text>
                     <text>满30可用</text>
                  </view>

                  <view class="circle l"></view>
                  <view class="circle r"></view>
               </view>
               <text class="tips">限新用户使用</text>
            </view>
         </view>
      </view> -->
   </view>
</template>

<script lang="ts">
import { Component, Vue, Inject, Watch, Ref } from "vue-property-decorator";
import { ShopModule } from "@/store/modules/shop";
import { AddressModule } from "@/store/modules/address";
import { BaseView } from "../baseView";
import api from "@/utils/api";
import { Tips } from "@/utils/tips";

@Component
export default class CreateOrder extends BaseView {
   needLogin = true;

   comment: string = "";

   async onLoad(query: any) {
      AddressModule.GetAndSetUserAddressList();
   }

   async created() {}

   get sku() {
      return ShopModule.getCurrentSku;
   }

   get currentSpu() {
      return ShopModule.getCurrentSpu;
   }
   get currentShop() {
      return ShopModule.getCurrentShop;
   }

   get selectAddress() {
      return AddressModule.getSelectAddress;
   }

   async submit() {
      api.client_sumbitOrder({
         skus: [this.sku],
         address: this.selectAddress,
         comment: this.comment
      }).then(
         (res: any) => {
            uni.navigateTo({ url: "/pages/orders/pay?orderId=" + res });
         },
         err => {
            Tips.info(err.message);
         }
      );
   }
}
</script>

<style lang="scss">
page {
   background: $page-color-base;
   padding-bottom: 100upx;
}

.address-section {
   padding: 30upx 0;
   background: #fff;
   position: relative;

   .order-content {
      display: flex;
      align-items: center;
   }

   .icon-shouhuodizhi {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90upx;
      color: #888;
      font-size: 44upx;
   }

   .cen {
      display: flex;
      flex-direction: column;
      flex: 1;
      font-size: 28upx;
      color: $font-color-dark;
   }

   .name {
      font-size: 34upx;
      margin-right: 24upx;
   }

   .address {
      margin-top: 16upx;
      margin-right: 20upx;
      color: $font-color-light;
   }

   .icon-you {
      font-size: 32upx;
      color: $font-color-light;
      margin-right: 30upx;
   }

   .a-bg {
      position: absolute;
      left: 0;
      bottom: 0;
      display: block;
      width: 100%;
      height: 5upx;
   }
}

.goods-section {
   margin-top: 16upx;
   background: #fff;
   padding-bottom: 1px;

   .g-header {
      display: flex;
      align-items: center;
      height: 84upx;
      padding: 0 30upx;
      position: relative;
   }

   .logo {
      display: block;
      width: 50upx;
      height: 50upx;
      border-radius: 100px;
   }

   .name {
      font-size: 30upx;
      color: $font-color-base;
      margin-left: 24upx;
   }

   .g-item {
      display: flex;
      margin: 20upx 30upx;

      image {
         flex-shrink: 0;
         display: block;
         width: 140upx;
         height: 140upx;
         border-radius: 4upx;
      }

      .right {
         flex: 1;
         padding-left: 24upx;
         overflow: hidden;
      }

      .title {
         font-size: 30upx;
         color: $font-color-dark;
      }

      .spec {
         font-size: 26upx;
         color: $font-color-light;
      }

      .price-box {
         display: flex;
         align-items: center;
         font-size: 32upx;
         color: $font-color-dark;
         padding-top: 10upx;

         .price {
            margin-bottom: 4upx;
         }
         .number {
            font-size: 26upx;
            color: $font-color-base;
            margin-left: 20upx;
         }
      }

      .step-box {
         position: relative;
      }
   }
}
.yt-list {
   margin-top: 16upx;
   background: #fff;
}

.yt-list-cell {
   display: flex;
   align-items: center;
   padding: 10upx 30upx 10upx 40upx;
   line-height: 70upx;
   position: relative;

   &.cell-hover {
      background: #fafafa;
   }

   &.b-b:after {
      left: 30upx;
   }

   .cell-icon {
      height: 32upx;
      width: 32upx;
      font-size: 22upx;
      color: #fff;
      text-align: center;
      line-height: 32upx;
      background: #f85e52;
      border-radius: 4upx;
      margin-right: 12upx;

      &.hb {
         background: #ffaa0e;
      }

      &.lpk {
         background: #3ab54a;
      }
   }

   .cell-more {
      align-self: center;
      font-size: 24upx;
      color: $font-color-light;
      margin-left: 8upx;
      margin-right: -10upx;
   }

   .cell-tit {
      flex: 1;
      font-size: 26upx;
      color: $font-color-light;
      margin-right: 10upx;
   }

   .cell-tip {
      font-size: 26upx;
      color: $font-color-dark;

      &.disabled {
         color: $font-color-light;
      }

      &.active {
         color: $base-color;
      }
      &.red {
         color: $base-color;
      }
   }

   &.desc-cell {
      .cell-tit {
         max-width: 90upx;
      }
   }

   .desc {
      flex: 1;
      font-size: $font-base;
      color: $font-color-dark;
   }
}

/* 支付列表 */
.pay-list {
   padding-left: 40upx;
   margin-top: 16upx;
   background: #fff;
   .pay-item {
      display: flex;
      align-items: center;
      padding-right: 20upx;
      line-height: 1;
      height: 110upx;
      position: relative;
   }
   .icon-weixinzhifu {
      width: 80upx;
      font-size: 40upx;
      color: #6bcc03;
   }
   .icon-alipay {
      width: 80upx;
      font-size: 40upx;
      color: #06b4fd;
   }
   .icon-xuanzhong2 {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60upx;
      height: 60upx;
      font-size: 40upx;
      color: $base-color;
   }
   .tit {
      font-size: 32upx;
      color: $font-color-dark;
      flex: 1;
   }
}

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   z-index: 995;
   display: flex;
   align-items: center;
   width: 100%;
   height: 90upx;
   justify-content: space-between;
   font-size: 30upx;
   background-color: #fff;
   z-index: 998;
   color: $font-color-base;
   box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
   .price-content {
      padding-left: 30upx;
   }
   .price-tip {
      color: $base-color;
      margin-left: 8upx;
   }
   .price {
      font-size: 36upx;
      color: $base-color;
   }
   .submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 280upx;
      height: 100%;
      color: #fff;
      font-size: 32upx;
      background-color: $base-color;
   }
}

/* 优惠券面板 */
.mask {
   display: flex;
   align-items: flex-end;
   position: fixed;
   left: 0;
   top: var(--window-top);
   bottom: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0);
   z-index: 9995;
   transition: 0.3s;

   .mask-content {
      width: 100%;
      min-height: 30vh;
      max-height: 70vh;
      background: #f3f3f3;
      transform: translateY(100%);
      transition: 0.3s;
      overflow-y: scroll;
   }
   &.none {
      display: none;
   }
   &.show {
      background: rgba(0, 0, 0, 0.4);

      .mask-content {
         transform: translateY(0);
      }
   }
}

/* 优惠券列表 */
.coupon-item {
   display: flex;
   flex-direction: column;
   margin: 20upx 24upx;
   background: #fff;
   .con {
      display: flex;
      align-items: center;
      position: relative;
      height: 120upx;
      padding: 0 30upx;
      &:after {
         position: absolute;
         left: 0;
         bottom: 0;
         content: "";
         width: 100%;
         height: 0;
         border-bottom: 1px dashed #f3f3f3;
         transform: scaleY(50%);
      }
   }
   .left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      overflow: hidden;
      height: 100upx;
   }
   .title {
      font-size: 32upx;
      color: $font-color-dark;
      margin-bottom: 10upx;
   }
   .time {
      font-size: 24upx;
      color: $font-color-light;
   }
   .right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 26upx;
      color: $font-color-base;
      height: 100upx;
   }
   .price {
      font-size: 44upx;
      color: $base-color;
      &:before {
         content: "￥";
         font-size: 34upx;
      }
   }
   .tips {
      font-size: 24upx;
      color: $font-color-light;
      line-height: 60upx;
      padding-left: 30upx;
   }
   .circle {
      position: absolute;
      left: -6upx;
      bottom: -10upx;
      z-index: 10;
      width: 20upx;
      height: 20upx;
      background: #f3f3f3;
      border-radius: 100px;
      &.r {
         left: auto;
         right: -6upx;
      }
   }
}
</style>